// vue.config.js
// 导入node中的path模块处理路径
const path = require('path')
// __dirname表示当前文件的存放路径
// 动态生成cover.less文件的绝对路径
const coverPath = path.join(__dirname, './src/cover.less')

// 当npm run serve的时候，process.env.NODE_ENV的值是development
// 当npm run build的时候，process.env.NODE_ENV的值是production
// process.env.NODE_ENV是一个环境变量，通过读取环境变量的值就可以判断当前的运行模式
console.log(process.env.NODE_ENV)

const obj = {
  // import 时的包名称: window 全局的成员名称 这个名称不能乱写（在其他地方引入的时候名字可以自己定）
  'highlight.js': 'hljs',
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  vant: 'vant',
  dayjs: 'dayjs',
  'socket.io-client': 'io',
  popmotion: 'popmotion'
}

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // lessOptions: { // 按照文档注释掉这一级（注意下面对应的大括号）
        modifyVars: {
          // 直接覆盖变量 'key':'value' 修改后要重新run
          // 'nav-bar-background-color': '#007bff',
          // 'border-color': '#eee'
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${coverPath}";`
        }
        // }
      }
    }
  },
  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化 打包的时候把externals内部的排斥在外
    externals: process.env.NODE_ENV === 'development' ? {} : obj
  },
  // 通过chainwebpack来修改webpack配置
  chainWebpack: config => {
    // 1、config.plugin('html')的作用：拿到html-webpack-plugin插件的当前配置项
    // 2、通过.taP()方法，可以修改插件的配置项
    // 3、在.tap(fn)方法中，接受一个function回调，在这个毁掉中修改
    // 4、在.tap()的function回调中，args就是当前的配置项，最终修改完之后一定要return修改就最新的配置项
    config
      .plugin('html')
      .tap(args => {
        console.log(args)
        args[0].title = '头条-129'
        // 根据当前的变异模式，动态为mode赋值
        // 如果是npm run serve 则mode的值为development
        // 如果是npm run build 则mode的值为production
        args[0].mode = process.env.NODE_ENV
        console.log(args)
        return args
      })
  }
}
